import axios from 'axios'
import React, { useEffect, useState } from 'react'
import Header from '../ui-components/Header'
import Model from '../ui-components/Model/index'
import './index.css'
import ObjectMap from '../common/ObjectMap'
import People from './个人.svg'
//import Back from './人物.jpg'
export default function Member (props) {
  const [info, setInfo] = useState({})
  const [tip, setTip] = useState(false)
  let submitInfo = { tec: [] };
  let technical = [{ 'id': 1, 'name': '算法' },
  { 'id': 2, 'name': '产品' },
  { 'id': 3, 'name': '后端开发' },
  { 'id': 4, 'name': '前端开发' },
  { 'id': 5, 'name': '测开' }]
  let enjoy = [{ 'id': 1, 'name': '旅游' },
  { 'id': 2, 'name': '运动' },
  { 'id': 3, 'name': '阅读' },
  { 'id': 4, 'name': '上网' },
  { 'id': 5, 'name': '游戏' },
  { 'id': 6, 'name': '音乐' }]
  useEffect(() => {
    axios.get(`/api1/member`)
      .then((response) => {
        console.log('res', response.data)
        setInfo(response.data)
      })
  }, [setInfo])
  const onChangeName = (e) => {
    const { target: { value } } = e
    submitInfo.name = value
  }
  const onChangeGender = (e) => {
    const { target: { value } } = e
    submitInfo.gender = value;
  }
  const onChangeTel = (e) => {
    const { target: { value } } = e
    submitInfo.tel = value
  }
  const onChangeTec = (e) => {
    const { target: { value } } = e
    submitInfo.tec.push(value)
  }
  const onChangeLike = (e) => {
    const { target: { value } } = e
    submitInfo.like = value
    //console.log(value)
  }
  const onChangeIntroduce = (e) => {
    const { target: { value } } = e
    submitInfo.introduce = value
    //console.log(value)
  }
  function confirm (i) {
    switch (i) {
      case 0:
        props.history.push('/diss')
        break
      case 1:
        props.history.push('/navigation')
        break
      case 2:
        props.history.push('/book')
        break
      case 3:
        props.history.push('/member')
        break
      default:
        break
    }
  }
  //发送数据
  const onSubmit = () => {
    submitInfo.tec = JSON.stringify(submitInfo.tec)
    axios.post(`/api1/member`, submitInfo)
      .then((response) => {
        info[Object.keys(info).length] = submitInfo
        //console.log(submitInfo)
        setInfo({ ...info })
        const { status } = response.data
        if (status === 'success') {
          setTip(true)
          setTimeout(() => {
            setTip(false)
          }, 1200);
        }
      })
  }
  return (
    <> <Model isShow={tip} message='提交成功' type='success'></Model>
      <div>
        {<Header items={['讨论', '导航', '书柜', '成员', '活动', '发现']} confirm={confirm}></Header>}
        <form action="" className="member-form" onSubmit={onSubmit}>
          <table border="1" width="400" height="350" cellPadding="5" cellSpacing="0"  >
            <tr><td>姓 名</td><td><input type="text" name="username" onChange={onChangeName} required="required" autofocus placeholder="请输入姓名" /></td></tr>
            <tr><td>联系方式</td><td><input type="tel" name="username" onChange={onChangeTel} required="required" placeholder="请输入11位电话" /></td></tr>
            {/* <tr><td>最帅的我</td><td><input type="file" name="username" /></td></tr> */}
            <tr><td>性 别</td><td>
              <input type="radio" onChange={onChangeGender} name="gender" value="女" />女
              <input type="radio" onChange={onChangeGender} name="gender" value="男" />男
            </td></tr>
            <tr><td>技术方向</td><td>
              {technical.map((itemTec, index) => {
                return (
                  <>
                    <input type="checkbox" key={itemTec.id} value={itemTec.name} onChange={onChangeTec} />{itemTec.name}
                  </>
                )
              })}
            </td></tr>
            <tr><td>个人爱好</td><td>
              <select name="hobby" multiple="miltiple" onChange={onChangeLike}>
                {enjoy.map((itemEnjoy, index) => {
                  return (
                    <>
                      <option value={itemEnjoy.name} key={itemEnjoy.id} >{itemEnjoy.name}</option>
                    </>
                  )
                })}
              </select>
            </td></tr>
            <tr><td>个人简介</td><td><textarea onChange={onChangeIntroduce} required name="info" rows="6" cols="45"></textarea>
            </td></tr>
            <tr><td colspan="2" align="center">
              <input className="member-button1" type="submit" value="提 交" />
              <input className="member-button1" type="reset" value="重 置" />
            </td></tr>
          </table>
        </form>
        <>
          <img src={People} alt="个人" className="member-people" />
          <button className="member-button"> 我要上榜</button>
          {/* <img src={Back} alt="人物" className="member-back" /> */}
        </>
        <div className="member-content">
          {ObjectMap.call(info, (item, index) => {
            return (
              <div key={index} className="member-sub">
                <div className='name'>{item.name} </div>
                {item.gender === "男" && <svg t="1638275530465" className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7144" width="32" height="32"><path d="M512 105.3c-220.7 0-399.7 179-399.7 399.7s179 399.7 399.7 399.7 399.7-179 399.7-399.7-179-399.7-399.7-399.7z m241.6 270.8h-0.5v175.4h-99.8v-90.1l-46.6 49.7c13.7 27.1 21.4 57.6 21.4 90 0 110.4-89.5 200-199.9 200s-199.9-89.5-199.9-200 89.5-200 199.9-200c36.1 0 70.1 9.6 99.3 26.4l48.3-51.4h-97.5v-99.7h275.3v99.7z" fill="#0091FF" p-id="7145"></path><path d="M428 501.5c-55.1 0-99.7 44.8-99.7 100s44.6 100 99.7 100 99.7-44.8 99.7-100-44.7-100-99.7-100z" fill="#0091FF" p-id="7146"></path></svg>}
                {item.gender === "女" && <svg t="1638275567838" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8920" width="32" height="32"><path d="M512 105.5c-220.6 0-399.5 178.9-399.5 399.5S291.4 904.5 512 904.5 911.5 725.6 911.5 505 732.6 105.5 512 105.5z m200 621.9H561.5v75.1h-99.1v-75.1H312V627.3h150.4v-6.2c-33.6-8.6-65.5-25.9-91.8-52.2-78-78-78-204.5 0-282.5s204.5-78 282.5 0 78 204.5 0 282.5c-26.3 26.3-58.1 43.7-91.7 52.2v6.2h150.4v100.1h0.2z" fill="#FF4D94" p-id="8921"></path><path d="M582.4 356.1c-39.1-39.1-102.5-39.1-141.6 0-39.1 39.1-39.1 102.4 0 141.5 39.1 39.1 102.5 39.1 141.6 0 39.1-39 39.1-102.4 0-141.5z" fill="#FF4D94" p-id="8922"></path></svg>}
                <div className='number'>手机联系方式：{item.tel}</div>
                <div className='number'>个人爱好：{item.like}</div>
                <div className='introduce'>个人简介：{item.introduce}</div>
                {
                  JSON.parse(item.tec).map((itemT, index) => {
                    return <div className='tec'>{itemT}</div>
                  })
                }
              </div>
            )
          }, false)}
        </div>
      </div>
    </>
  )
}

